<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建Bug - MiniBug</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-gray-50">
    <nav class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/bugs" class="text-xl font-bold text-gray-900">MiniBug</a>
                </div>
                <div class="flex items-center space-x-4">
                    <span id="user-info" class="text-sm text-gray-700"></span>
                    <button onclick="logout()" class="text-sm text-gray-500 hover:text-gray-700">退出</button>
                </div>
            </div>
        </div>
    </nav>
    
    <main class="max-w-3xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="px-4 py-6 sm:px-0">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-gray-900">新建Bug</h1>
                <p class="mt-1 text-sm text-gray-600">填写Bug信息并上传相关图片</p>
            </div>
            
            <form id="bugForm" class="space-y-6">
                <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
                    <div class="grid grid-cols-1 gap-6">
                        <!-- 标题 -->
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700">标题 *</label>
                            <input type="text" name="title" id="title" required
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        </div>
                        
                        <!-- 项目 -->
                        <div>
                            <label for="project_id" class="block text-sm font-medium text-gray-700">项目 *</label>
                            <select name="project_id" id="project_id" required
                                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="">请选择项目</option>
                            </select>
                        </div>
                        
                        <!-- 优先级 -->
                        <div>
                            <label for="priority" class="block text-sm font-medium text-gray-700">优先级</label>
                            <select name="priority" id="priority"
                                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="low">低</option>
                                <option value="medium" selected>中</option>
                                <option value="high">高</option>
                                <option value="critical">紧急</option>
                            </select>
                        </div>
                        
                        <!-- 描述 -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700">描述</label>
                            <textarea name="description" id="description" rows="4"
                                      class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                      placeholder="详细描述Bug的情况..."></textarea>
                        </div>
                        
                        <!-- 图片上传 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700">图片</label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                            <span>上传图片</span>
                                            <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple accept="image/*">
                                        </label>
                                        <p class="pl-1">或拖拽到此处</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF 最大 10MB</p>
                                </div>
                            </div>
                            <div id="image-preview" class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
                                <!-- 图片预览将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3">
                    <a href="/bugs" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        取消
                    </a>
                    <button type="submit" class="bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        创建Bug
                    </button>
                </div>
            </form>
        </div>
    </main>

    <script>
        let uploadedImages = [];
        
        // 加载项目列表
        function loadProjects() {
            $.ajax({
                url: '/api/projects',
                method: 'GET',
                success: function(data) {
                    const select = $('#project_id');
                    data.forEach(project => {
                        select.append(`<option value="${project.id}">${project.name}</option>`);
                    });
                }
            });
        }
        
        // 处理文件上传
        function handleFileUpload(files) {
            Array.from(files).forEach(file => {
                if (!file.type.startsWith('image/')) {
                    alert('请选择图片文件');
                    return;
                }
                
                const formData = new FormData();
                formData.append('image', file);
                
                $.ajax({
                    url: '/api/upload',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        uploadedImages.push(response.picture);
                        displayImagePreview(response.picture);
                    },
                    error: function(xhr) {
                        const error = xhr.responseJSON ? xhr.responseJSON.error : '上传失败';
                        alert(error);
                    }
                });
            });
        }
        
        // 显示图片预览
        function displayImagePreview(picture) {
            const preview = $('#image-preview');
            preview.append(`
                <div class="relative">
                    <img src="/api/images/${picture.filename}" alt="${picture.original_name}" 
                         class="w-full h-32 object-cover rounded-lg">
                    <button type="button" onclick="removeImage('${picture.filename}')" 
                            class="absolute top-2 right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                        ×
                    </button>
                </div>
            `);
        }
        
        // 移除图片
        function removeImage(filename) {
            uploadedImages = uploadedImages.filter(img => img.filename !== filename);
            $(`img[src="/api/images/${filename}"]`).parent().remove();
        }
        
        // 表单提交
        $('#bugForm').on('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                title: $('#title').val(),
                description: $('#description').val(),
                project_id: parseInt($('#project_id').val()),
                priority: $('#priority').val(),
                picture_ids: uploadedImages.map(img => img.id)
            };
            
            $.ajax({
                url: '/api/bugs',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    alert('Bug创建成功！');
                    window.location.href = '/bugs';
                },
                error: function(xhr) {
                    const error = xhr.responseJSON ? xhr.responseJSON.error : '创建失败';
                    alert(error);
                }
            });
        });
        
        // 文件选择事件
        $('#file-upload').on('change', function(e) {
            handleFileUpload(e.target.files);
        });
        
        // 拖拽上传
        $('.border-dashed').on('dragover', function(e) {
            e.preventDefault();
            $(this).addClass('border-indigo-500 bg-indigo-50');
        });
        
        $('.border-dashed').on('dragleave', function(e) {
            e.preventDefault();
            $(this).removeClass('border-indigo-500 bg-indigo-50');
        });
        
        $('.border-dashed').on('drop', function(e) {
            e.preventDefault();
            $(this).removeClass('border-indigo-500 bg-indigo-50');
            handleFileUpload(e.originalEvent.dataTransfer.files);
        });
        
        // 退出登录
        function logout() {
            $.ajax({
                url: '/api/logout',
                method: 'POST',
                success: function() {
                    window.location.href = '/login';
                }
            });
        }
        
        $(document).ready(function() {
            loadProjects();
        });
    </script>
</body>
</html>
